<template>
  <!--主体内容区域-->
  <el-row class="content">
    <!--  左边区域-->
    <el-col class="con_left" :span="19">
      <!--    左边头部-->
      <el-row class="header">
        <el-col class="logo" :span="9">
          <dv-border-box-4 :color="[ 'green']" class="border-box-4">
            <dv-border-box-4 :reverse="true" :color="[ 'green']" style="overflow:hidden">
              <dv-border-box-8 class="box-8" style="overflow:hidden">
                <span class="title1">湖北交投智慧高速交通态势</span>
                <span class="title2">Intelligent high speed traffic situation monitoring</span>
              </dv-border-box-8>
            </dv-border-box-4>
          </dv-border-box-4>
        </el-col>
        <el-col class="time" :span="15">
          <div style="display: flex;flex-direction: row;overflow:hidden;">
            <dv-decoration-11
              class="de-decoration11"
              @click.native="realTime"
              :color="[colorChange]"
            >实时
            </dv-decoration-11>
            <dv-decoration-11
              class="decoration11"
              @click.native="fiveTime"
              :color="[colorChange1]"
            >5min
            </dv-decoration-11>
            <dv-decoration-11
              class="decoration11"
              @click.native="fifTime"
              :color="[colorChange2]"
            >15min
            </dv-decoration-11>
            <dv-decoration-11
              class="decoration11"
              @click.native="threeTime"
              :color="[colorChange3]"
            >30min
            </dv-decoration-11>
            <dv-decoration-11
              class="decoration11"
              @click.native="firstTime"
              :color="[colorChange4]"
            >1h
            </dv-decoration-11>
            <dv-decoration-11
              class="decoration11"
              @click.native="secondTime"
              :color="[colorChange5]"
            >2h
            </dv-decoration-11>
          </div>
        </el-col>
      </el-row>
      <!--    左边内容-->
      <section>
        <div class="left">
          <div class="realtime">
            <dv-decoration-3 class="decoration-3"/>
            <dv-border-box-11 title="交通实时态势" :color="[ 'green']" style="overflow:hidden;">
              <leftRealDataCharts :jamsTotalRate="jamsTotalRate"/>
              <!--     <leftRealDataCharts4 /> -->
              <div style=" display: flex; flex-direction: column;">
                <div style=" display: flex;flex-direction: row;">
                  <img src="../../assets/imgs/tubiao.png" class="imgs01"/>
                  <span class="decoration-7">车流量 {{trafficRealTImeList.carNum}}辆</span>
                </div>
                <div style=" display: flex;flex-direction: row;">
                  <img src="../../assets/imgs/tubiao.png" class="imgs01"/>
                  <span class="decoration-7">平均速度 {{trafficRealTImeList.avgSpeed}}</span>
                </div>
                <div style=" display: flex;flex-direction: row;">
                  <img src="../../assets/imgs/tubiao.png" class="imgs01"/>
                  <span class="decoration-7">拥堵里程 {{trafficRealTImeList.jamsTotal}}</span>
                </div>
                <div style=" display: flex;flex-direction: row;">
                  <img src="../../assets/imgs/tubiao.png" class="imgs01"/>
                  <span class="decoration-7">高速总里程数 {{trafficRealTImeList.total}}</span>
                </div>
              </div>
            </dv-border-box-11>
          </div>
          <div class="traffic">
            <dv-border-box-9 style="overflow:hidden;" :color="[ 'green']">
              <leftCongestionChart :rateDatas="rateDatas"/>
            </dv-border-box-9>
          </div>
        </div>
        <div class="right">
          <div class="map">
            <mapOfHuBei/>
            <dv-decoration-7 class="eventName" :color="['green','grenn']">事件清单</dv-decoration-7>
            <dv-border-box-7 class="border-box">
              <event :selectEvenits="selectEvenits"/>
            </dv-border-box-7>
            <dv-border-box-7 class="border-box1">
              <eventVideo :eventVideos="eventVideos"/>
            </dv-border-box-7>
            <div class="border-boxRight1" align="left">
              <span class="first"></span>
              <span class="first1">畅通</span>
            </div>
            <div class="border-boxRight2" align="left">
              <span class="second"></span>
              <span class="second1">基本畅通</span>
            </div>
            <div class="border-boxRight3" align="left">
              <span class="three"></span>
              <span class="three1">轻度拥堵</span>
            </div>
            <div class="border-boxRight4" align="left">
              <span class="four"></span>
              <span class="four1">中度拥堵</span>
            </div>
            <div class="border-boxRight5" align="left">
              <span class="five"></span>
              <span class="five1">重度拥堵</span>
            </div>
          </div>
        </div>
      </section>
    </el-col>
    <!--  右边区域-->
    <el-col class="con_right" :span="5">
      <!--    基础信息展示-->
      <div class="basic_info">
        <div style="display: flex;flex-direction: row">
          <dv-decoration-1 class="dv-decoration-1"/>
          <dv-decoration-1 class="decoration-1"/>
        </div>
        <basicInfo :selectBasics="selectBasics"/>
      </div>
      <div class="traffic_top10">拥堵排行</div>
      <div class="flow_top10">大流量排行</div>
    </el-col>
  </el-row>
</template>

<script>
// 导入组件
import basicInfo from '@/views/home/components/basicInfo'
// 导入接口请求函数
import {
  trafficRealTIme,
  selectBasics,
  selectSection,
  selectFlow,
  selectEvenit,
  addTrafficRealTime,
  trafficMapType,
  trafficJamsRate,
  cameraInfoList
} from '../api/index'
export default {
  name: 'Home',
  data () {
    return {
      selectBasics: {}
    }
  },
  created () {
    this.getSelectBasics()
  },
  components: {
    basicInfo
  },
  methods: {
    getSelectBasics () {
      selectBasics().then(res => {
        if (res.data) {
          this.selectBasics = res.data
        }
      })
    }
  }
}
</script>

<style scoped lang="less">
  .content {
    width: 100%;
    height: 100%;
    background: radial-gradient(rgba(2, 34, 195, 1), rgba(12, 20, 58, 1));
    overflow: hidden;
    .con_left {

      /*background-color: yellow;*/

      .header {
        height: 15vh;

        /*background-color: pink;*/
        font-size: 24px;

        .logo {
          height: 100%;
          .border-box-4 {
            /*margin-top: 10px;*/
            /*overflow: hidden;*/
          }
          .title1 {
            margin-top: 30px;
            text-align: center;
            display: block;
            font-size: 40px;
            font-weight: 900;
            color: #fff;
            font-family: '\5FAE\8F6F\96C5\9ED1',serif;
            //background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(rgba(48, 248, 250, 1)), to(rgba(255, 255, 255, 1)));
            //background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(rgba(48, 248, 250, 1)), to(rgba(255, 255, 255, 1)));
            text-shadow: rgba(255, 255, 255, 0.4) 0 3px 4px, rgba(255, 255, 255, 0.2) 1px 3px 3px;
          }

          .title2 {
            margin-top: -10px;
            display: block;
            text-align: center;
            font-size: 20px;
            font-weight: 400;
            color: #fff;
          }
        }

        .time {
          .de-decoration11 {
            margin-top: 45px;
            width: 160px;
            height: 80px;
            font-size: 30px;
            font-weight: 900;
            color: #60cda0;
            cursor: pointer;
          }

          .decoration11 {
            margin-top: 52px;
            width: 150px;
            height: 65px;
            font-size: 25px;
            font-weight: 600;
            color: #60cda0;
            cursor: pointer;
          }

        }
      }

      section {
        height: 85vh;
        background-color: orange;
        display: flex;

        .left {
          flex: 1;

          .realtime {
            height: 42.5vh;
            background-color: red;
          }

          .traffic {
            height: 42.5vh;
            background-color: blue;
          }
        }

        .right {
          flex: 3;
        }
      }
    }

    .con_right {
      /*background-color: purple;*/

      .basic_info {
        height: 20vh;
        .dv-decoration-1 {
          width: 50%;
          height: 30px;
          margin-top: 30px;
        }

        .decoration-1 {
          width: 50%;
          height: 30px;
          margin-top: 30px;
          margin-right: 10px;
        }
      }

      .traffic_top10 {
        height: 40vh;
      }

      .flow_top10 {
        height: 40vh;
        /*background-color: gold;*/
      }
    }
  }

</style>
